<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-03 09:39:41
 * @LastEditTime : 2021-09-09 11:11:01
 * @FilePath     : /newhope/src/components/myPrize/index.vue
 * @Description  : 
-->
<script setup lang="ts">
import { Mask, RedPackage } from "/@/components/index";
import check from '/@/assets/images/bkg/check.png'
import { ref } from "vue";
import clipboard from 'clipboard'
import { getPrizeSrc } from "/@/utils/prizeClassification";
import ActivityRules from "/@/assets/images/prize/activityRules.png";
import Button from "/@/assets/images/prize/fillInInformation.png";
import { onMounted } from "vue";
import { useStore } from "vuex";
import { useGo } from "/@/hooks/go";
import { State } from "/@/store/user";
import diamonds from "/@/assets/images/prize/diamonds.png";
const [go] = useGo();
const store = useStore();
const fillInInformation = ref(false); // 是否显示填写信息
const prizeList = ref<string[]>([]);
const redPackageList = ref<{ type: string, value: string } | null>(null)
const emit = defineEmits(["onClickMask"]);
onMounted(() => {
  const user: State = store.state.user;
  const diamond = user.myawards.find(item => item.type === 'diamond')
  const necklace = user.myawards.find(item => item.type === 'necklace')
  const milk = user.myawards.find(item => item.type === '"milk"')
  const verifi = [
    user.userInfo.address,
    user.userInfo.truename,
    user.userInfo.phone,
  ];
  if (milk || necklace || diamond) {
    if (verifi.includes("")) {
      fillInInformation.value = true;
    }
    // fillInInformation.value = true;
  }

  // if (verifi.includes("")) {
  //   fillInInformation.value = true;
  // }
  user.myawards.forEach((myPrizeItem) => {
    const curPrize = user.prizeList.find(
      (item) => {
        //  redpacket
        if (myPrizeItem.type === 'redpacket') {
          redPackageList.value = myPrizeItem
          return false
        }
        return item.type === myPrizeItem.type
      }
    );
    if (curPrize) {
      prizeList.value = prizeList.value.concat(curPrize.type);
    }
  });
});
function cancel() {
  emit("onClickMask");
}
function toInfoPage() {
  go({ name: "info" });
}
function prizeClick(prizeItem: string) {
  const user: State = store.state.user;
  if (prizeItem === 'coupon') {
    const curPrize = user.myawards.find(item => item.type === 'coupon')
    location.href = curPrize!.value as string
    return
  }
  if (prizeItem === 'member') {
    const curPrize = user.myawards.find(item => item.type === 'member')
    const c = new clipboard('.prize', {
      text: () => {
        return curPrize?.value as string
      }
    })
    c.on('success', () => {
      alert(`兑换码复制成功,兑换码为:${curPrize?.value}`)
      c.destroy()
    })
    c.on('error', () => {
      alert(`兑换码复制失败,兑换码为:${curPrize?.value}`)
      c.destroy()
    })
    return
  }

}
</script>

<template>
  <div class="myPrizeCpm">
    <Mask :style="'z-index: 104'" @click="cancel" />
    <div class="rulesBox">
      <div class="re">
        <img :src="ActivityRules" alt="rules" class="rules" />
        <div
          class="prizeList"
          :style="(prizeList.length === 0 && !redPackageList) ? 'justify-content: center' : ''"
        >
          <img
            v-for="(prizeItem, prizeIndex) in prizeList"
            @click="prizeClick(prizeItem)"
            :key="prizeIndex"
            :src="getPrizeSrc(prizeItem)"
            alt="diamonds"
            class="prize"
          />

          <RedPackage v-if="redPackageList" :code="redPackageList.value" class="prize" />
          <img v-if="prizeList.length === 0 && !redPackageList" :src="check" class="check" />
          <!-- <img :src="diamonds" alt="diamonds" class="prize" /> -->
          <!-- <img :src="diamonds" alt="diamonds" class="prize" /> -->
        </div>
      </div>
    </div>
    <img
      :src="Button"
      @click="toInfoPage"
      v-if="fillInInformation"
      alt="fillInInformation"
      class="fillInInformation"
    />
  </div>
</template>
<style lang="scss" scoped>
.check {
  height: 80px;
  // width: 50px;
  object-fit: cover;
}
.myPrizeCpm {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 103;
  .fillInInformation {
    position: absolute;
    top: 542px;
    left: 50%;
    transform: translateX(-50%);
    width: 143px;
    height: 42px;

    z-index: 111;
  }

  .rulesBox {
    position: absolute;
    top: 201px;
    left: 50%;
    transform: translateX(-50%);
    width: 316px;
    height: 271px;
    z-index: 105;
    .re {
      position: relative;
      height: 100%;
      width: 100%;
      .rules {
        height: 120%;
        width: 100%;
      }
      .prizeList {
        position: absolute;
        top: 48px;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        // overflow: hidden;
        overflow-y: scroll;
        .prize {
          width: 261px;
          height: 30px;
          margin-bottom: 4px;
        }
      }
    }
  }
}
</style>
